<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<style>
    .layui-table-cell {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div>
    <button type="button" class="layui-btn" id="upload"><i class="layui-icon"></i>导入Excel</button>
</div>
<div>
    <table class="layui-hide" id="studentTable"></table>
</div>
<div>
    <button type="button" class="layui-btn layui-btn-warm" onclick="exportExcel()">导出Excel</button>
</div>

<script src="/layui/layui.js"></script>
<script src="/layui/layui.all.js"></script>
<script>
    function exportExcel() {
        location.href = "/export";
    }

    layui.use('upload', function () {
        var $ = layui.jquery;
        var upload = layui.upload;

        //指定允许上传的文件类型
        upload.render({
            elem: '#upload'
            , url: '/upload' //改成您自己的上传接口
            , accept: 'file' //普通文件
            , exts: 'xls|xlsx'
            , done: function (res) {
                layer.msg(res.message);
                location.href = "/index";
            }
        });
    });

    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#studentTable'
            , url: '/findAll'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'id', title: 'ID', sort: true, align: 'center'}
                , {field: 'name', title: '姓名', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'photo', title: '头像', align: 'center', templet: "#imgtmp"}
                , {field: 'tel', title: '电话', align: 'center'}
                , {field: 'sex', title: '性别', align: 'center'}
                , {field: 'address', title: '地址', align: 'center'}
                , {
                    field: 'birthday',
                    title: '出生日期',
                    align: 'center',
                    templet: "<div>{{layui.util.toDateString(d.birthday, 'yyyy-MM-dd')}}</div>"
                }
            ]]
        });
    });
</script>
<script type="text/html" id="imgtmp">
    <img src="{{'imgs/'+d.photo}}" style="width: 80px;height: 80px"/>
</script>
</body>
</html>